<template>
    <div class="content-container">
        <div class="container-fluid">
            <div class="page-content">
                <div class="card">

                    <div class="box-typical chat-container">
                        <section class="chat-list">
                            <div class="chat-list-search">
                                <input type="text" class="form-control form-control-rounded" placeholder="搜索"/>
                            </div><!--.chat-list-search-->
                            <div class="chat-list-in" style="height:741px;overflow:auto;position:relative;" onclick="">
                                <div class="chat-list-item online" v-for="data in sender">
                                    <div class="chat-list-item-photo">
                                        <img src="http://cdn.duitang.com/uploads/item/201410/16/20141016202155_5ycRZ.thumb.700_0.jpeg">
                                    </div>
                                    <div class="chat-list-item-header">
                                        <div class="chat-list-item-name">
                                            <span class="name">{{ data.sender}}</span>
                                        </div>
                                        <div class="chat-list-item-date"></div>
                                    </div>
                                    <div class="chat-list-item-cont">
                                        <div class="chat-list-item-txt writing">

                                        </div>
                                        <div class="chat-list-item-count"></div>
                                    </div>
                                </div>
                            </div><!--.chat-list-in-->
                        </section><!--.chat-list-->

                        <section class="chat-area">
                            <div class="chat-area-in">
                                <div class="chat-area-header">
                                    <div class="chat-list-item online">
                                        <div class="chat-list-item-photo">
                                            <img src="img/photo-64-1.jpg" alt="">
                                        </div>
                                        <div class="chat-list-item-name">
                                            <span class="name">Thomas Bryan</span>
                                        </div>
                                        <div class="chat-list-item-txt writing">Last seen 05 aug 2015 at 18:04
                                        </div>
                                    </div>
                                </div><!--.chat-area-header-->

                                <div class="messenger-dialog-area" style="height:550px;overflow:auto;position:relative;">

                                    <div class="messenger-message-container">
                                        <div class="avatar">
                                            <img src="#">
                                        </div>
                                        <div class="messages">
                                            <ul>
                                                <li>
                                                    <div class="message">
                                                        <div>
                                                            545453
                                                        </div>
                                                    </div>
                                                    <div class="time-ago">453453453 </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="messenger-message-container from">
                                        <div class="messages">
                                            <ul>
                                                <li>
                                                    <div class="time-ago">1:26</div>
                                                    <div class="message">
                                                        <div class="bg-blue">
                                                            Lorem Ipsum is simply dummy text of the printing and
                                                            typesetting industry. Lorem Ipsum has been the
                                                            industry's standard dummy text ever since the 1500s,
                                                            when an unknown printer took a galley of type and
                                                            scrambled it to make a type specimen book.
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="avatar">
                                            <img
                                                src="http://cdn.duitang.com/uploads/item/201410/16/20141016202155_5ycRZ.thumb.700_0.jpeg">
                                        </div>
                                    </div>

                                </div><!--.chat-dialog-area-->

                                <div class="chat-area-bottom">
                                    <form class="write-message">
                                        <div class="form-group">
                                            <textarea class="form-control mt-1" style="resize: none; height: auto;" rows="4" placeholder="输入消息..."></textarea>
                                        </div>
                                        <button type="reset" class="btn btn-secondary float-right">清除</button>
                                        <button type="submit" class="btn btn-primary float-right">发送</button>
                                    </form>
                                </div><!--.chat-area-bottom-->
                            </div><!--.chat-area-in-->
                        </section><!--.chat-area-->
                    </div><!--.chat-container-->

                </div> <!-- .card -->
            </div> <!-- .page-content -->
        </div> <!-- .container-fluid -->
    </div> <!-- .content-container -->
</template>

<script>
    export default {

        data() {
            return {
                sender: '',
                mailbox: ''
            }
        },
        mounted() {
            axios.get('/user/getMailbox')
                .then(function (response) {
                    this.sender = response.data[0]
                    this.mailbox = response.data[1]
                })
                .catch(function (error) {
                    $.each(error.response.data.errors, function (index, object) {
                        toast(object[0]);
                        return false;
                    });
                })
        }
    }
</script>
